<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer;

        function init(){
            OpenLayers.ProxyHost="/proxy/?url=";
            map = new OpenLayers.Map('map', {'maxResolution':'auto', maxExtent: new OpenLayers.Bounds(-203349.72008129774,4816309.33,1154786.8041952979,5472346.5), projection: 'EPSG:26915' } );
            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    ["http://geoint.lmic.state.mn.us/cgi-bin/wms"], {layers: 'fsa'} );
            map.addLayer(layer);


            wfs_url = "http://prototype.openmnnd.org/cgi-bin/mapserv.exe?map=openmnndwfs/openmnndwfs.map";
            wms = new OpenLayers.Layer.WMS("Minnesota Parcels (WMS)", wfs_url, {'layers':'streams', 'transparent': true, 'format':'image/gif'});

            map.addLayer(wms);

            wfs = new OpenLayers.Layer.WFS("Minnesota Streams (WFS)", wfs_url, {'typename':'streams'}, {ratio:1.25, minZoomLevel:4, style: OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default'])});

            // preFeatureInsert can be used to set style before the feature is drawn
            wfs.preFeatureInsert= function(feature) { feature.style.strokeWidth="3"; feature.style.strokeColor="blue";
            }
            wfs.onFeatureInsert = function(feature) {
              OpenLayers.Util.getElement('stream_features').innerHTML = feature.layer.features.length;
            }
            map.addLayer(wfs);

            // Or a style can be set on the layer.
            pwfsstyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
            OpenLayers.Util.extend(pwfsstyle, {'fillColor': 'green'});

            pwfs = new OpenLayers.Layer.WFS("Minnesota Plat (WFS)", wfs_url,
              {'typename':'plat'},
              {
               ratio:1.25,
               minZoomLevel:8,
               extractAttributes: true,
               style: pwfsstyle
              });

            pwfs.onFeatureInsert= function(feature) {
              OpenLayers.Util.getElement('plat_features').innerHTML = feature.layer.features.length;
            }
            map.addLayer(pwfs);

            rstyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
            OpenLayers.Util.extend(rstyle, {'strokeColor': 'white', strokeWidth: "4"});
            rwfs = new OpenLayers.Layer.WFS("Minnesota Roads (WFS)", wfs_url, {'typename':'roads'},
              {ratio:1.25, minZoomLevel:7, extractAttributes: true, style:rstyle});

            rwfs.onFeatureInsert= function(feature) {
              OpenLayers.Util.getElement('road_features').innerHTML = feature.layer.features.length;
            }

            map.addLayer(rwfs);

            map.events.register('moveend', null, function() {
                OpenLayers.Util.getElement('stream_features').innerHTML = "0";
                OpenLayers.Util.getElement('road_features').innerHTML = "0";
                OpenLayers.Util.getElement('plat_features').innerHTML = "0";
            });

            var ls = new OpenLayers.Control.LayerSwitcher();
            map.addControl(ls);

            drawControls = {
                selectPlat: new OpenLayers.Control.SelectFeature(pwfs, {callbacks: {'up':feature_info,'over':feature_info_hover}}),
                selectRoad: new OpenLayers.Control.SelectFeature(rwfs, {callbacks: {'up':feature_info,'over':feature_info_hover}})
            };

            for(var key in drawControls) {
                map.addControl(drawControls[key]);
            }
            drawControls.selectPlat.activate();

            map.zoomToExtent(new OpenLayers.Bounds(303232.550864,5082911.694856,305885.161263,5084486.682281));
        }

        function toggleControl(element) {
            for(key in drawControls) {
                var control = drawControls[key];
                if(element.value == key && element.checked) {
                    control.activate();
                } else {
                    control.deactivate();
                }
            }
        }
        var displayedFeature = null;
        function feature_info_hover(feature) {
            if (displayedFeature != feature &&
               (!feature.layer.selectedFeatures.length ||
               (feature.layer.selectedFeatures[0] == feature))) {
            feature_info(feature);
            displayedFeature = feature;
           }
        }
        function feature_info(feature) {
            var html = "<ul>";
            for(var i in feature.attributes)
               html += "<li><b>" + i + "</b>: "+  feature.attributes[i] + "</li>";
            html += "</ul>";
            OpenLayers.Util.getElement('feature_info').innerHTML = html;
        }
    </script>
  </head>
  <body onload="init()">
    <p id="shortdesc">This example shows the use of a WFS service rendered using the OpenLayers vector library.</p>
    <div id="map" class="smallmap"></div>
    <div id="docs">
            <p>
            This is an example that shows rendering a WFS service using OpenLayer vectors in the browser. The OpenLayers code will download the GML
            from the WFS service for each layer, parse it and create features using the OL vector library to draw the features on the map. For
            more information on the vector library, please visit <a href="http://trac.openlayers.org/wiki/Documentation/VectorSupport">vector support wiki</a>.
            In this example there are 4 layers shown on the map.  The base layer and parcel layer are created from a WMS serivce using the OpenLayers.Layer.WMS object.
            The streams, roads, and plat layers are drawn from a WFS service using the OpenLayers.Layer.WFS object.
            </p>

            <p>
            Rendering WFS layers into vectors is possible, but you need to be cautions when showing the features on the map.  Testing has shown that when
            you renderer more than 200 vectors in the browser the performance decreases dramatically.  Also features that have a lot of vertices
            can cause performance issues. In this example the parcel layer is rendered as a WMS layer because at the time of developing this example
            there where a handful of features that had too many vertices to render without killing the browser resources.

            There are a number of properties that can be set for each WFS layer, such color and line weight using style properties such as strokeColor and strokeWidth.
            You can also get feature attributes from the WFS services using the extractAttribute property.  View the source to see the example code.
            </p>
    </div>
    <div id="info">
      <ul>
        <li>Streams: Feature Count <span id="stream_features">0</span></li>
        <li>Plat: Feature Count <span id="plat_features">0</span></li>
        <li>Roads: Feature Count <span id="road_features">0</span></li>
      </ul>
      <div id="feature_info">
      </div>
      <ul>
        <li>
            <input type="radio" name="type" value="selectRoad" id="selectToggle" onclick="toggleControl(this);"  />
            <label for="selectToggle">select road</label>
        </li>
        <li>
            <input type="radio" name="type" value="selectPlat" id="selectToggle" onclick="toggleControl(this);" checked=checked />
            <label for="selectToggle">select polygon</label>
        </li>
    </ul>
    </div>
  </body>
</html>
